import { Layout, theme, Space, Avatar, Dropdown, Button, message } from "antd";
import { useNavigate } from "react-router-dom";
import type { MenuProps } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { setOpenKeys, setSelectedKeys, removeAllTags } from "@/store/menuSlice";
const { Header } = Layout;

const Head = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const items = [
    {
      key: "1",
      label: "退出",
    },
  ];
  const onClick: MenuProps["onClick"] = ({ key }) => {
    if (key === "1") {
      // 重置redux
      sessionStorage.clear();
      dispatch(removeAllTags());
      dispatch(setOpenKeys([]));
      dispatch(setSelectedKeys([]));
      message.success("退出成功", 1);
      navigate("/");
    }
  };
  return (
    <>
      <Header
        style={{
          width: "100%",
          padding: 0,
          background: colorBgContainer,
          position: "sticky",
          top: 0,
          zIndex: 9999,
        }}
      >
        <div
          style={{
            width: "100%",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "end",
            padding: "0 16px",
          }}
        >
          <div></div>
          <Space size={16} wrap>
            <Dropdown
              menu={{ items, onClick }}
              placement="bottom"
              arrow={{ pointAtCenter: true }}
              trigger={["click"]}
            >
              <Avatar
                shape="circle"
                size={40}
                style={{ backgroundColor: "#f56a00" }}
              >
                Admin
              </Avatar>
            </Dropdown>
          </Space>
        </div>
      </Header>
    </>
  );
};

export default Head;
